<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { User, Lock, Check, Iphone, Discount } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
import LoginFooter from '@/views/Student/Login/components/LoginFooter.vue'
import { getCaptcha, RegisterAPI } from '@/api/login'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
//验证码
const captchaImg = ref('')
//用户登录的表单对象
const user = reactive({
  username: '',
  usernumber: '',
  schoolName: '',
  password: '',
  captcha: '',
  className: '',
  remember: false
})

//定义表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '用户名必须为字母或数字', trigger: 'blur' }
  ],
  usernumber: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^[0-9]{11,11}$/, message: '长度必须为11个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '长度为 4 个字符', trigger: 'blur' }
  ],
  className: [
    { required: true, message: '请输入班级', trigger: 'blur' }
    // { pattern: /^[0-9_\u4e00-\u9fa5]+$/, message: '班级必须为中文和数字', trigger: 'blur' }
  ],
  schoolName: [
    { required: true, message: '请输入学校全称', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '学校全称为中文', trigger: 'blur' }
  ],
  remember: [{ required: true, message: '请阅读用户服务协议', trigger: 'change' }],
  // 验证码
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

//点击注册重新跳转回登录页面
const myform = ref(null)
const register = () => {
  myform.value.validate((valid) => {
    if (valid) {
      RegisterAPI(user).then((res) => {
        console.log(res)
        if (res.data.code == 1) {
          localStorage.setItem('info', JSON.stringify(res.data.user))
          router.push('/')
          ElMessage.success('注册成功')
        } else {
          ElNotification({
            title: '错误',
            message: res.data.massage,
            type: 'error'
          })
        }
      })
    }
    //记住我
    localStorage.user = JSON.stringify(user)
    console.log(user)
  })
}

//数据回显
const showUserInfo = () => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    const userObj = JSON.parse(userStr)
    user.username = userObj.username
    user.usernumber = userObj.usernumber
    user.schoolName = userObj.schoolName
    user.className = userObj.className
    user.remember = userObj.remember
    // console.log(userObj)
  }
}
onMounted(() => {
  showUserInfo() // 生命周期函数的使用
})
//获取验证码
const updateCaptcha = () => {
  getCaptcha().then((res) => {
    console.log(res)
    captchaImg.value = 'data:image/png;base64,' + res.data
    console.log(captchaImg)
  })
}
updateCaptcha()
</script>
<template>
  <div class="my-zhuce-box">
    <el-card style="border-radius: 10px; height: 36.875rem; width: 43.75rem">
      <h1 style="color: #999999; opacity: 0.5">新用户注册</h1>
      <el-form size="large" :rules="rules" :model="user" ref="myform" class="user-form">
        <!-- 设置用户名称 -->
        <el-form-item prop="username">
          <el-input
            :prefix-icon="User"
            v-model="user.username"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <!-- 选择所在学校/单位 -->
        <el-form-item prop="schoolName">
          <el-input
            :prefix-icon="Discount"
            v-model="user.schoolName"
            placeholder="请输入学校全称"
            clearable
          />
        </el-form-item>
        <!-- 选择班级-->
        <el-form-item prop="className">
          <el-input
            :prefix-icon="Discount"
            v-model="user.className"
            placeholder="请输入班级(例如:软件2022级1班)"
            clearable
          />
        </el-form-item>
        <!-- 输入手机号码 -->
        <el-form-item prop="usernumber">
          <el-input
            :prefix-icon="Iphone"
            v-model="user.usernumber"
            placeholder="输入手机号码"
            clearable
          />
        </el-form-item>
        <!-- 使用验证码进行登录 -->
        <el-form-item prop="captcha">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-input
                :prefix-icon="Check"
                v-model="user.captcha"
                placeholder="验证码"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="1">
              <img
                :src="captchaImg"
                alt=""
                title="点我刷新"
                @click="updateCaptcha"
                style="width: 11.375rem; height: 2.9rem"
              />
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 设置密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="user.password"
            :prefix-icon="Lock"
            show-password="true"
            clearable="true"
            type="password"
            placeholder="请输入密码"
            style="margin-top: -15px"
          ></el-input>
        </el-form-item>

        <!-- 用户同意协议 -->
        <el-form-item prop="  remember">
          <el-checkbox label="已阅读并同意" v-model="remember" />
          <el-link type="primary">《用户服务协议》</el-link>
        </el-form-item>

        <!-- 注册按钮 -->
        <el-form-item>
          <el-button type="primary" class="btn" @click="register()">注册用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <el-divider border-style="dashed" style="size: 3px; border-color: black" />
  <LoginFooter> </LoginFooter>
</template>

<style scoped lang="scss">
.my-zhuce-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-card {
  align-items: center;
  width: 350px;
  //   padding: -1rem;
}
.btn {
  width: 100%;
  background: #7cd4c6;
  border: #7cd4c6;
}
.yanzhenma {
  width: 100%;
  background: #7cd4c6;
  border: #7cd4c6;
}
.user-form {
  border-radius: 80px;
}
</style>
